<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>后代选择器练习</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 基础样式（可忽略） */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .container {
      border: 2px solid #333;
      padding: 20px;
    }

    .box {
      background: #f0f0f0;
      margin: 10px 0;
      padding: 10px;
    }

    .special {
      border: 1px dashed #ff0000;
    }

    /* 任务1：用 container p 选择所有 .container 下的 <p>（无论嵌套多深）。 */
    /* 效果：所有段落文字变蓝。 */
    .container p {
      color: blue;
    }
    /* 
    任务2：用 .box ul li 选择 .box 下的 <ul> 里的 <li>。
    效果：列表项背景变黄。
    */
    .box ul li{
      background-color:yellow;
    }
    /* 
    任务3：用 .special.box a 选择同时有 .special 和 .box 的 <a>。
    效果：链接变红且无下划线。
    */
    .special.box a{
      color: red;
      text-decoration: none;
    }
    /*
    任务4：用 footer p 选择 footer 下的所有 <p>（包括嵌套的）。
    效果：所有页脚段落变斜体
    */
    footer p{
      font-style: italic;
    }
    
  </style>
</head>

<body>
  <div class="container">
    <h1>后代选择器练习</h1>
    <p>这是一个段落（直接子元素）。</p>

    <div class="box">
      <p>这是.box里的段落（子元素）。</p>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ul>
    </div>

    <div class="box special">
      <p>这是.special.box里的段落。</p>
      <a href="#">链接</a>
    </div>

    <footer>
      <p>页脚段落。</p>
      <div>
        <p>嵌套在footer里的段落。</p>
      </div>
    </footer>
  </div>
</body>

</html>